<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>产品详情页</title>
	<link rel="stylesheet" type="text/css" th:href="@{/web/css/global.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/web/css/layout.css}">

</head>
<body>
	<div id="wrapper">
		<span id="menuName" style="display: none;" th:text="'•&nbsp;&nbsp;产品&nbsp;•&nbsp;&nbsp;'+${productTag.name}+'&nbsp;•&nbsp;&nbsp;'+${product.productName}"></span>
		<!-- header -->
		<div id="header" th:include="web/header::homeHeader" ></div>
		<!-- main -->
		<div id="main" >
			<div id="product-details">
				<div id="banner" class="product-details-lf banner" style="width: 48%;display: table-cell;">
					<div class="slide-wrap">
						<ul>
							<li th:each=" photoList : ${product.photoList}">
								<img th:src="${photoList.productImg}" alt="" style="width: 100%;">
							</li>
						</ul>
						<a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" th:src="@{/web/img/arrowl.png}" alt="prev" width="20" height="35"></a>
						<a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" th:src="@{/web/img/arrowr.png}" alt="next" width="20" height="37"></a>
					</div>
				</div>
				<div class="product-details-rt">
					<h3 class="product-title" th:text="${product.productName}">法兰绒家居服</h3>
					<div class="product-message">
						<p th:utext="${#strings.replace(product.productMessage,'\n','<br/>')}" id="productMessage">法兰绒，保暖，家居服</p>
					</div>
					<!--<div class="product-colors" th:if="${product.imgList.size() >0 }">
						<div th:each=" imgList ,imgStat: ${product.imgList}">
							<img th:src="${imgList.imgUrl}" th:title="${imgList.imgName}">
						</div>
					</div>-->
					<div class="product-colors"  >
						<div th:each="imgList,iterStat: ${product.imgList}">
							<img th:src="${imgList.imgUrl}" th:title="${imgList.imgName}">
						</div>
					</div>
					<div class="product-types" th:if="${product.sizeList.size() >0 }">
						<span  th:each=" sizeList : ${product.sizeList}" th:text="${sizeList.name}" th:title="${sizeList.name}">160/66A</span>
					</div>
					<span class="product-link"><img th:src="@{/web/img/pro-icon.svg}"/>欲了解更多详情,<a class="product-buy-btn" th:href="${product.link}" style="color: rgb(0, 0, 255);">请点击此处</a></span>
				</div>
			</div>
			<section id="more-recommend">
				<header>
					<h3>更多推荐</h3>
				</header>
				<div class="more-product-list">
					<div class="recommend-product" th:each="recommedPro :${simpPros}">
						<a th:href="'/web/productDetails?productId='+${recommedPro.productId}"><img th:src="${recommedPro.covenPhoto}" alt=""></a>
						<span><a th:href="'/web/productDetails?productId='+${recommedPro.productId}" th:text="${recommedPro.productName}">商品名称</a></span>
					</div>
				</div>
				<a href="javascript:void(0);" ><img class="arrow-l" th:src="@{/web/img/arrowl.png}" alt="prev" width="20" height="35" title="上一页"></a>
				<a href="javascript:void(0);" ><img class="arrow-r" th:src="@{/web/img/arrowr.png}" alt="next" width="20" height="37" title="下一页"></a>
			</section>
			<div class="order-tag">
				<div class="product-tag">
					<a th:href="'/web/productExhibition?tagId='+${productTag.id}"><img th:src="${productTag.tagUrl}" th:title="${productTag.name}"></a>
					<span th:title="${productTag.name}" th:text="${productTag.name}"> </span>
				</div>
				<div class="product-tag-random">
					<a th:href="'/web/productExhibition?tagId=' + ${productTagRandom.id}"><img th:src="${productTagRandom.tagUrl}" th:title="${productTagRandom.name}"></a>
					<span th:title="${productTagRandom.name}" th:text="${productTagRandom.name}"> </span>
				</div>
			</div>
		</div>
		<!-- footer -->
		<div id="footer" th:include="web/footer::footer"></div>
	</div>
	<script type="text/javascript" th:src="@{/js/plugins/jquery-1.11.3.min.js}"></script>
	<script type="text/javascript" th:src="@{/web/js/unslider.min.js}"></script>
	<script type="text/javascript" th:src="@{/web/js/header.js}"></script>
	<script type="text/javascript" th:src="@{/web/js/footer.js}"></script>
	<script type="text/javascript" th:src="@{/web/js/productDetails.js}"></script>
	<script>
        $(function(){
            var unslider04 = $('.slide-wrap').unslider({
                dots: true
            });
            var data04 = unslider04.data('unslider');

            $('.unslider-arrow04').click(function() {
                var fn = this.className.split(' ')[1];
                data04[fn]();
            });
        });
	</script>
</body>
</html>